<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt qw-form-card">
      <!-- 自定义筛选项 start  -->
      <table-form
        :dynamicData="dynamicData"
        @on-submit="getData"
        @on-reset="getData"
      >
        <!-- <itemData slot='header' :itemData="item.data" :formData="formData" v-bind:is="item.fileName" @handleChangeFormData="handleChangeFormData"></component> -->
        <div
          v-for="(item, index) in dynamicData.formSlots"
          :key="index"
          :slot="item.slotName"
        >
          <async-load-comp :asyncData="item.slotData" />
        </div>
      </table-form>
      <!-- 自定义筛选项 end  -->
    </Card>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <!-- 调用表格子组件 start  -->
      <table-list :dynamicData="dynamicData" :pagePath="pagePath" ref="table" />
      <!-- 调用表格子组件 end  -->
    </Card>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import tableForm from '@/components/common/baseForm'; // 表单组件
import tableList from './comps/baseTable'; // 表格组件
import asyncLoadComp from '@/components/common/asyncLoadComp'; // 动态导入组件
import { getBtnsId } from '@/libs/btnsPermission';

export default {
  components: {
    tableForm,
    tableList,
    asyncLoadComp
  },
  data () {
    return {
      dynamicData: {},
      pagePath: '' // 当前路由
    };
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'formItemData',
      'formItemDataRules'
    ])
  },
  created () {
    this.getConfigData();
  },
  mounted () {
    this.getData();
  },
  methods: {
    ...mapMutations('admin/baseList', [
      'setListData',
      'setFormItemData',
      'setFormItemDataRules'
    ]),
    // 获取表格数据
    getData (formData) {
      let curBtnId = getBtnsId('查询');
      sessionStorage.setItem('buttonId', curBtnId);
      this.$refs.table.getData(formData);
    },
    // 获取初始配置信息
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/acceptItemManageList').default;
      this.$set(this.$data, 'dynamicData', dynamicData);
      this.setListData(dynamicData);
      this.setFormItemData(dynamicData.formData);
      this.setFormItemDataRules(dynamicData.formDataRules);
    }
  }
};
</script>